<template>
  <div>
    <button v-on:click="fn">点击</button>
    <button @click="fn">点击2</button>
    <button @click="huaMoney(200000)">娶媳妇花了200000</button>
    <button @click="huaMoney(500000)">买车花了500000</button>
    <button @click="huaMoney(1000000)">买房首付1000000</button>
    <div
      @click="divClick"
      style="width: 200px; height: 200px; border: 1px solid red"
    >
      <button @click="innerClick($event, 100)">内层的button</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'on-component',
  methods: {
    fn() {
      console.log('事件触发了')
    },
    huaMoney(money) {
      console.log('花了' + money + '元')
    },
    divClick() {
      console.log('div点击了')
    },
    innerClick(e) {
      //内层盒子点击了的时候，取消冒泡，拿到事件对象
      //绑定事件的时候，如果没有传递任何参数，默认第一个参数就是事件对象
      //如果事件绑定的时候传递参数了，通过$event手动传递参数
      e.stopPropagation()
      console.log('内层的button被点击了')
    },
  },
}
</script>
